<template>
  <div>
    <div>
      <div>
        <van-nav-bar title="空调" left-arrow @click-left="wendu">
          <template #right>
            <van-icon name="ellipsis" />
          </template>
        </van-nav-bar>
      </div>
      <div class="my_kongwen">
        <div>
          温度
        </div>
        <div class="my_tu">
          <van-circle class="my_van1" v-model:current-rate="currentRate" :rate="rate1" :stroke-width="50" :size="190"
            :color="gradientColor">
            <van-circle class="my_van" v-model:current-rate="currentRate" :rate="rate" :stroke-width="120" :size="120"
              :color="gradientColor" :text="text" />
          </van-circle>
        </div>
        <div class="my_jiesheng">
          <div>
            <span>开/关</span>
            <p class="my_guan">关闭它最多可节省100元/kwh</p>
          </div>
          <div>
            <div><van-switch v-model="checked1" active-color="#7033FF" inactive-color="#FB8F66" />
            </div>
          </div>
        </div>
        <div class="my_jiesheng1">
          <div>
            <span>开/关</span>
            <p class="my_guan">关闭它最多可节省100元/kwh</p>
          </div>
          <div>
            <div><van-switch v-model="checked2" active-color="#7033FF" inactive-color="#FB8F66" /></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import router from '@/router';
import { ref } from 'vue';
const checked1 = ref()
const checked2 = ref()

const wendu = () => {
  router.push('./Living')
}
const text = ref('27℃')

const currentRate = ref(100);
const rate = ref(60)
const rate1 = ref('100%')

const gradientColor = {
  '0%': ' #fb8f66 ',
  '100%': ' #7033ff',
};
</script>

<style scoped lang="scss">
.my_kongwen {
  padding:1rem;

  .my_tu {
    height: 23rem;
    width: 23rem;
    border: dashed 0.2rem #ccc;
    border-radius: 50%;
    text-align: center;
    margin-left: 6rem;
    line-height: 30rem;

    .my_van1 {
      margin-top: 2rem;
    }

    .my_van {
      width: 12.8rem;
      height: 12.8rem;
      border-radius: 50%;
      background-blend-mode: normal;
      box-shadow: 0rem 2rem 4rem rgba(112, 51, 255, 0.4);
    }
  }

  .my_jiesheng {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 8rem;
    border-bottom: 0.1rem solid #ABA3CF;

    .my_guan {
      color: #ABA3CF;
    }
  }

  .my_jiesheng1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 8rem;

    .my_guan {
      color: #ABA3CF;
    }
  }
}
</style>